﻿@model ListenMusic.Models.ViewModel.ListenPage

@{
    ViewBag.Title = "ListenPage";
    Layout = "~/Views/Shared/_LayoutPublic.cshtml";
}
<link href="../../Styles/MusicPlayer.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
            $("a[id=alyrics]").click(function(){
                 var da = $('div #add-lyrics');
                 if(da.css('display') == 'none')
                 {
                        da.css({'display' : 'block'});
                 }
                 else
                 {
                        da.css({'display' : 'none'});
                 }
            });
            $("#btnLyrics").click(function(){
                var lyrics = $("#text-lyrics").val();
                var param = {'lyrics' : lyrics, 'songid' : '@Model.SongID'};
                $.ajax({
                    url : '/user/updateLyrics',
                    data: param,
                    contentType: 'application/json; charset=utf-8',
                    dataType:"json",
                    success: function(result){
                        alert("Thành công");
                    }
                });
            });
           
               var psd = {songid : '@Model.SongID'};
               setInterval(function(){
                    $.post('/listen/updateCountView',psd, function(data){
                    
                    });
               },'@ViewBag.durationMP3');
                                   
         
            var parameter = {
                'songid' : '@Model.SongID',
                'pageindex': 1
            };
        setInterval(function(){
            $.post('/comment/LoadSongComment',parameter,function(data){
                var detail = "";
                for(i = 0; i<data.length;i++)
                {   
                      detail += "<p class='content-comment'><span><img width=50px height=70px src=../../Images/Avatars/" + data[i].Picture + "/><label class='username-comment'>" + data[i].UserName + "</label>" + " : " + data[i].CommentContent + "</p><span>";
                }
                $('#exist-comment').html(detail);
                
            });
          },3000);
        $("#postcomment").click(function () {
           
            var comment = {
                'typeID' : 1,
                'SongID' : '@Model.SongID',
                'comment': $('#comment').val(),
            };
            $.post('/user_comment/post',comment,function(data)
               {
                    if(data == true)
                    {
                      document.getElementById("comment").value ='';
                    }
                    else
                    {
                         $("#error-text").html(data);
                    }
               });
        })
    })
</script>   
<script type="text/javascript">
    function breakLine() {
        var keyCode = event.keyCode
        if (keyCode == 13) {
            document.getElementById('text-lyrics').value = document.getElementById('text-lyrics').value + "\n";
        }
    }
</script>
<form method="post" action="/comment/post" id="frmsingle">
@Html.Hidden("typeID", '1')
@Html.Hidden("songID", @Model.SongID)
@Html.Hidden("album_ID", null)
@Html.Hidden("returnURL", ViewContext.HttpContext.Request.Url.PathAndQuery)
<div id="music-content">
    <div id="music-left">
        <div id="music-title">
            <ul>
                <li><h1>@Model.SongName</h1></li>
                <li class="sub-music"><h5>Sáng tác: @Model.MusicianName | 
                @if (@Model.AlbumName != null) 
                    { 
                       <label>Album:</label>  <a href="#">@Model.AlbumName</a> <label>|</label> 
                    } 
                Thể loại: <a href="#">@Model.CategoryName</a></h5>    </li>
            </ul>            
        </div>
        <div id="music-player">
           <div id="container1"></div>
           <script src="../../JWPlayer/jwplayer.js" type="text/javascript"></script>
            <script type="text/javascript">
                jwplayer("container1").setup
                (
                  {                    
                    'flashplayer': '../../JWPlayer/player.swf',
                    'skin' :'../../JWPlayer/Skin/lava.zip',
                    'file': '../../Music/@Model.SongURL',
                    'image': '../../Images/logo.png',
                    'width': 670,
                    'height': 100,
                    'volume':80,                    
                    'controlbar':'bottom',
                    'autostart': 'true',
                    'repeat': 'always',
                    'allowfullscreen': 'false'
                   }
             )   
    </script>
        </div>
        <div id="sub-menu">
            <ul>
                <li><a href="#" title="Tải bài hát về máy tính" class="button-sub">Tải về</a></li>
                <li><a href="#" title="Thêm vào danh sách yêu thích" class="button-sub">Thêm</a></li>
                <li><a href="#" title="Chia sẽ" class="button-sub">Chia sẽ</a></li>
                <li><a href="#" title="Thông báo bài hát bị lỗi" class="button-sub">Báo lỗi</a></li>
            </ul>      
        </div>
        <div id="more-details">
            <div id="lyrics">
                <h3 class="title">Lời bài hát</h3>
                <div id="lyric-details">
                    @if(Model.Lyrics != null)
                    {
                        <p id="text-lyric">                                                    
                               @Html.Raw(Html.Encode(Model.Lyrics).Replace("/n", "<br />"))
                        </p>
                        <a href="#">Xem toàn bộ >></a>
                    }
                    else
                    {
                        <a href="#" id="alyrics">Thêm lời cho bài hát</a>
                        <div id="add-lyrics" style="display:none">
                            <textarea id="text-lyrics" onkeypress="breakLine()"  rows="5" cols="81" style="font-family:Tahoma,Arial,Sans-Serif; width:670px; margin-left:2px"></textarea> <br />
                            <input type="button" id="btnLyrics" value="Thêm lời" class="button" style="margin-left:550px" />
                        </div>
                    }
                </div>
            </div>  
            @if (@Model.SingerID != 21)
            {
            <div id="same-albums">
                <h3 class="title">Album cùng ca sĩ</h3>
                    <ul>
                        @for (int i = 0; i < @Model.lst_album.Count; i++)
                        { 
                             <li class="abc">
                            <a href="/listen/listenalbumpage?albumid=@Model.lst_album[i].AlbumID"><img src="../../Images/albums/@Model.lst_album[i].Picture" title="@Model.lst_album[i].AlbumName - @Model.SingerName" width="100px" height"100px" /></a>                                                                                 
                            <label>@Model.lst_album[i].AlbumName</label>
                        </li>
                        }                      
                    </ul>
            </div>
            <div id="same-videos">
                <h3 class="title">Video cùng ca sĩ</h3>
                <div class="content-same-songs">                   
                     <ul class="content-same-songs-left">
                        @for (int i = 0; i < @Model.lst_video.Count; i++)
                        {
                            <li><a href="#"><span class="name-music">@Model.lst_video[i].SongName</span></a> <h5 class="sub-music">Lượt nghe: @Model.lst_video[i].CountView</h5></li>                                                       
                            if (i == 4)
                            { 
                                @:</ul>
                                @:<ul class="content-same-songs-right">
                                <li><a href="#"><span class="name-music">@Model.lst_video[i].SongName</span></a> <h5 class="sub-music">Lượt nghe: @Model.lst_video[i].CountView</h5></li>                                                       
                            }
                        }
                     </ul>
                </div>              
            </div>
             <div id="same-songs">
                <h3 class="title">Bài hát cùng ca sĩ</h3>
                <div class="content-same-songs">                   
                     <ul class="content-same-songs-left">
                        @for (int i = 0; i < @Model.lst_song.Count; i++)
                        {
                            <li><a href="#"><span class="name-music">@Model.lst_song[i].SongName</span></a> <h5 class="sub-music">Lượt nghe: @Model.lst_song[i].CountView</h5></li>                                                       
                            if (i == 4)
                            { 
                                @:</ul>
                                @:<ul class="content-same-songs-right">
                                <li><a href="#"><span class="name-music">@Model.lst_song[i].SongName</span></a> <h5 class="sub-music">Lượt nghe: @Model.lst_song[i].CountView</h5></li>                                                       
                            }
                        }
                     </ul>                            
                     @* <ul class="content-same-songs-right">
                       @for (int k = 5; k < 10; k++)
                       {
                            <li><a href="#"><h4 class="name-music">@Model.lst_song[k].SongName</h4></a> <h5 class="sub-music">Lượt nghe: @Model.lst_song[k].CountView</h5></li>                            
                        }
                    </ul>*@            
                </div>
            </div>
            }
             <div id="comments">
                <h3 class="title">Bình luận</h3>
                <div id="exist-comment">
                    
                </div>
                <div class="page_comment_number" >
                    @for (int i = 1; i < ViewBag.pageNumber; i++)
                    { 
                        <a href="#">@i</a>
                    }
                </div>
                <div id="new-comment">
                    <textarea id="comment" name="comment" cols="81" rows="5"></textarea>
                    <div id="error-text"></div>
                     @if (Session["user"] == null)
                    {
                    <a href="#login-box" style="margin-left:550px;" class="login-window button"  >Gửi bình luận</a>
                    }
                    else
                    {
                         <input type="button" id="postcomment" style="margin-left:550px; margin-bottom:15px;" value="Gửi bình luận" />
                    }
                </div>
                
            </div>  
        </div>
    </div>
    <div id="music-right">
        <div id="right-content">
            <h3 class="title">Cùng dòng nhạc</h3>    
            <div>
                @for (int i = 0; i < @Model.lstsong_sameType.Count; i++)
                { 
                 <ul class="right-content-details">
                    <li><a href="listenpage?songid=@Model.lstsong_sameType[i].SongID"><h4 class="name-music">@Model.lstsong_sameType[i].SongName</h4></a></li>
                    <li>@Model.lstsong_sameType[i].SingerName</li>
                </ul>
                }  
            </div>
        </div>
        
    </div>    
</div>
</form>